<template>
	<div class="index">
		<!-- 轮播图 -->
		<Swiper v-if='$store.state.isPc && swiperData' :swiper-list='swiperData'></Swiper>
		<!-- 公告 -->
		<marquee behavior="" direction="" class="marquee">{{notice}}</marquee>
		<!-- <h1 class="index-notic"><a href="" class="text-color">更多</a></h1> -->
		
		<div class="index-main-intruduce">
			<h1>CoinCola全球場外交易市場</h1>
			<p>與您附近的交易商買賣BTC，ETH，USDT，EOS，BCH，LTC，DASH和XRP</p>
			<h1 class="trade-type">場外交易</h1>
			<div class="btns c-c" v-if='$store.state.isPc'>
				<div @click='changeType(0)' :class="type_index == 0 ? 'active' : 'unactive'">購買</div>
				<div @click='changeType(1)'  :class="type_index == 1 ? 'active' : 'unactive'">出售</div>
			</div>
			
			<div class="btns c-c" v-else>
				<div>場外交易</div>
				<div>禮品卡交易</div>
			</div>
		</div>
		
		<!-- 买卖列表 -->
		<ul class="buy-list s-b" v-if='$store.state.isPc'>
			<li v-for='item in renderTarget' :key='item.id' @click='toAdDetail(item)'>
				<div class="header f-s">
					<img :src="item.avatar" alt="">
					{{item.nickname}}
				</div>
				<div class="item s-b">
					<span>交易：</span>
					<span>{{item.trade_times}}</span>
				</div>
				<div class="item s-b">
					<span>好評：</span>
					<span>{{Number(item.trade_rate) * 100}}%</span>
				</div>
				<div class="item s-b" style='margin-bottom : 45px;'>
					<span>支付方式：</span>
					<pay-type :pay-ment="item.pay_type_list"></pay-type>
				</div>
				<div class="item s-b">
					<span>限額：</span>
					<span>{{item.min_money}}-{{item.max_money}}{{item.currency}}</span>
				</div>
				<div class="price">
					<p>價格</p>
					<h1>
						{{item.price}}<em>{{item.currency}}</em>
					</h1>
					<a >購買{{item.code}}</a>
				</div>
			</li>
		</ul>
		<h1 class="trade-type">擔保交易</h1>
		<!-- 推荐担保交易 -->
		<ul class="buy-list s-b" v-if='$store.state.isPc'>
			<li v-for='item in exchange_list' :key='item.id' @click='toExchangeAdDetail(item)'>
				<div class="header f-s">
					<img :src="item.avatar" alt="">
					{{item.nickname}}
				</div>
				<div class="item s-b">
					<span>交易：</span>
					<span>{{item.trade_times}}</span>
				</div>
				<div class="item s-b">
					<span>好評：</span>
					<span>{{Number(item.trade_rate) * 100}}%</span>
				</div>
				<div class="item s-b" style='margin-bottom : 45px;'>
					<span>支付方式：</span>
					<pay-type :pay-ment="item.pay_type_list"></pay-type>
				</div>
				<div class="item s-b">
					<span>以{{item.currency}}兌換{{item.cur_currency}}</span>
					<!-- <span>{{item.min_money}}-{{item.max_money}}{{item.currency}}</span> -->
				</div>
				<div class="price">
					<p>兌換金額</p>
					<h1>
						{{item.cur_price}}<em>{{item.cur_currency}}</em>
					</h1>
					<a >查看</a>
				</div>
			</li>
		</ul>
		<!-- 交易市场 -->
		<div class="market" >
			<div class="index-main-intruduce" >
				<h1>CoinCola全球場外交易市場</h1>
				<p>瞭解更多的新興市場並拓展您的投資組合</p>
			</div>
			<el-table 
				:data='table'
				style='width : 1200px; margin: 0 auto;'>
				<el-table-column label='交易對' prop='name'>
					<template slot-scope="scope">
						<!-- <img :src="scope.row.logo_png" alt=""> -->
						{{scope.row.name}}
					</template>
				</el-table-column>
				<el-table-column label='最新價（$）' prop='price_usd'></el-table-column>
				<el-table-column label='1H漲跌幅' prop='percent_change_1h' v-if='$store.state.isPc'>
					<template slot-scope="scope">
						<span :class="scope.row.percent_change_1h >= 0 ?'zhang' : 'die'">
							{{scope.row.percent_change_1h}}%
						</span>
					</template>
				</el-table-column>
				<el-table-column label='24H漲跌幅' prop='percent_change_24h' v-if='$store.state.isPc'>
					<template slot-scope="scope">
						<span :class="scope.row.percent_change_24h >= 0 ?'zhang' : 'die'">
							{{scope.row.percent_change_24h}}%
						</span>
					</template>
				</el-table-column>
				
				<el-table-column label='7D漲跌幅' prop='percent_change_7d' v-if='$store.state.isPc'>
					<template slot-scope="scope">
						<span :class="scope.row.percent_change_7d >= 0 ?'zhang' : 'die'">
							{{scope.row.percent_change_7d}}%
						</span>
					</template>
				</el-table-column>
				<el-table-column label='24H成交量' prop='volume_24h_usd'>
					<template slot-scope="scope">
						{{scope.row.volume_24h_usd | formatNum}}
					</template>
				</el-table-column>
			</el-table>
			<!-- <div class="view-more"  v-if='$store.state.isPc'>
				<a href="">查看更多</a>
			</div> -->
		</div>
		<!-- why choose -->
		<div class="why-choose">
			<h1>为什么要选择CoinCola</h1>
			<ul class="reason-list">
				<li class="reson-item">
					<img src="../assets/imgs/choose_one.png" alt="">
					<h2>交易便捷</h2>
					<p>
						支持多終端交易，WEB、APP行情及時掌握，快速交易，貼心服務，全球市場，交易隨時隨地
					</p>
					<a href="" v-if='$store.state.isPc'>了解更多</a>
				</li>
				<li class="reson-item">
					<img src="../assets/imgs/choose_two.png" alt="">
					<h2>安全可靠</h2>
					<p>
						冷存儲、SSL、多重加密等銀行級別安全技術，十年金融安全團隊，多重保障資產安全
					</p>
					<a href="" v-if='$store.state.isPc'>了解更多</a>
				</li>
				<li class="reson-item">
					<img src="../assets/imgs/choose_three.png" alt="">
					<h2>用戶至上</h2>
					<p>
						全用戶端支持多種語言版本，全球雙語專業客服，隨時隨地用心您提供服務
					</p>
					<a href="" v-if='$store.state.isPc'>了解更多</a>
				</li>
				<li class="reson-item">
					<img src="../assets/imgs/choose_four.png" alt="">
					<h2>低費率</h2>
					<p>
						我們提供合理的費率更有利於您的投資，支持多種數位貨幣交易，買賣自由，雙向交易
					</p>
					<a href="" v-if='$store.state.isPc'>了解更多</a>
				</li>
			</ul>
		</div>
		<!-- 全新交易平台介绍 -->

		<div class="trade-plaform">
			<h1>全球創新的數位資產交易平臺</h1>
			<p>
				創建您的帳號開始交易
			</p>
			<router-link tag='a' to='/reg'>立即註冊</router-link>
			<!-- <a href="/reg" target="_blank">立即注册</a> -->
		</div>
		<!-- <el-dialog title='設定資源密碼' center :width ="$store.state.isPc ? '30%' : '90%'" :visible.sync='showDialog'>
			<div class="dialog-container">
				<el-form >
					<el-form-item>
						<el-input placeholder="請輸入密碼（6~64比特數位、大小写字母組合密碼）" type='password'></el-input>
					</el-form-item>
					<el-form-item>
						<el-input placeholder="確認密碼" type='password'></el-input>
					</el-form-item>
				</el-form>
				<el-button type='primary' class="width100" @click='setTragePwdHandle'>確 認</el-button>
			</div>
		</el-dialog> -->
	</div>
</template>

<script>
	import Swiper from '@c/Swiper'
	import PayType from '@c/PayType'
	import {GetMarket, HomeHandle} from '@/api/common';
	export default {
		components : {
			Swiper,
			PayType
		},
		data () {
			return {
				table : null,
				showDialog : false,
				swiperData : null,//轮播图数据
				notice : null,
				sell_list :null,
				buy_list : null,
				exchange_list : null,//推荐担保交易
				renderTarget  : null,
				type_index : 0
			}
		},
		created () {
			//获取货币行情
			GetMarket({}).then(res => {
				if (res.result) {
					this.table = res.result
				}
			})
			//获取首页数据
			this.getIndex()
		},
		mounted () {
			// if (this.$store.state.userInfo && this.$store.state.userInfo.is_trade_password == 0) {
			// 	this.showDialog = true;
			// }
		},
		methods : {
			setTragePwdHandle () {

			},
			getIndex () {
				HomeHandle().then(res => {
					this.swiperData = res.result.slide;
					this.sell_list = res.result.sell_list;
					this.buy_list = res.result.buy_list;
					this.renderTarget = this.sell_list;
					this.exchange_list = res.result.exchange_list;
					this.notice = res.result.notice
				})
			},
			changeType (index) {
				this.type_index = index;

				if (index == 0) {
					this.renderTarget = this.sell_list;
				} else {
					this.renderTarget = this.buy_list
				}
			},
			toAdDetail (item) {
				let tradeType = this.type_index == 0 ? 'sell' : 'buy';

				this.$router.push(`/trade-ad-detail/${tradeType}/${item.id}`)
			},
			toExchangeAdDetail (item) {
				// console.log('/exchange-ad-detail/'+item.id)
				this.$router.push(`/exchange-ad-detail/${item.id}`)
			}
		}
	}
</script>

<style lang='less'>
	@import url('../assets/css/_b.less');
	
	@media screen and (max-width : 670px) {
		.index-main-intruduce {
			padding: 25px 0;
			text-align: center;
			h1 {
				color: rgb(57, 59, 89);
				font-size: 24px;
				font-weight: 700;
				margin: 22px;
			}
			p {
				font-size: 15px;
				color: rgb(120,126,158);
			}
			
		}
		.btns {
			margin-top: 15px;
			div {
				width: 40%;
				margin: 0 10px;
				text-align: center;
				padding: 15px 0;
				font-size: 1.125rem;
			}
			.active {
				box-shadow: rgba(86, 172, 254, 0.27) 0px 10px 10px 0px;
				background-image: linear-gradient(to left, rgb(69, 190, 255), rgb(0, 128, 255));
				color: rgb(250, 251, 252);
				border-radius: 0.25rem;
			}
			.unactive {
				box-shadow: none;
				background-image: none;
				background-color: rgb(255, 255, 255);
				color: rgb(57, 59, 89);
			}
		}
		
		.why-choose {
			li {
				background: none;
			}
		}
		.trade-plaform {
			background: #fff;
			padding: 50px 0;
			text-align: center;
			h1 {
				font-size: 1.5rem;
				font-weight: bold;
				margin-bottom: 30px;
			}
			p {
				font-size: 0.875rem;
				line-height: normal;
				color: #78889e;
				margin-top: 1.25rem;
			}
			a {
				display: block;
				border-radius: 0.25rem;
				box-shadow: 0 0.625rem 0.625rem 0 rgba(86,172,254,0.27);
				font-size: 1.125rem;
				-webkit-letter-spacing: 0.0625rem;
				-moz-letter-spacing: 0.0625rem;
				-ms-letter-spacing: 0.0625rem;
				letter-spacing: 0.0625rem;
				padding: 1rem 0;
				margin: 1.5rem auto 0;
				width: 62%;
				min-width: auto;
				background-image: linear-gradient(to right,#0080fe,#45beff);
				color: #fff;
			}
		}
		
	}
	@media screen and (min-width : 670px) {
		.trade-type {
			text-align: center;
			font-size: 30px;
			margin: 30px 0;
			font-weight: bold;
		}
		.marquee {
			background: #fff;
			padding: 10px;
			font-size: 15px;
		}
		.index-main-intruduce {
			padding: 45px 0;
			text-align: center;
			h1 {
				color: rgb(57, 59, 89);
				font-size: 40px;
				font-weight: 700;
				margin: 22px;
			}
			p {
				font-size: 18px;
				color: rgb(120,126,158);
			}
			
		}
		.btns {
			margin-top: 15px;
			div {
				cursor: pointer;
				width: 210px;
				margin: 0 10px;
				text-align: center;
				padding: 15px 0;
				font-size: 18px;
				
			}
			.active {
				box-shadow: rgba(86, 172, 254, 0.27) 0px 10px 10px 0px;
				background-image: linear-gradient(to left, rgb(69, 190, 255), rgb(0, 128, 255));
				color: rgb(250, 251, 252);
				border-radius: 0.25rem;
			}
			.unactive {
				box-shadow: none;
				background-image: none;
				background-color: rgb(255, 255, 255);
				color: rgb(57, 59, 89);
			}
		}
		.buy-list {
			width: 1200px;
			// margin-bottom: 30px;
			margin: 0 auto 30px;
			li {
				    
				width: 214px;
				height: 315px;
				box-shadow: rgba(104, 191, 222, 0.08) 0px 8px 14px 0px;
				text-align: left;
				background-color: rgb(255, 255, 255);
				font-family: "PingFang SC", sans-serif;
				border-radius: 8px;
				margin: 0px auto;
				padding: 39px 25px 25px;
				.header {
					font-size: 16px;
					margin-bottom: 10px;
					img {
						width: 40px;
						height: 40px;
						border-radius : 50%;
						margin-right: 15px;
					}
				}
				.item {
					font-size: 12px;
					// padding: 15px 0;
					color :rgba(9, 42, 68, 0.5);;
					margin-bottom: 15px;
					span:nth-child(2) {
						color: #000;
					}
				}
				.price {
					p {
						color: @mainColor;
						font-size: 16px;
						margin-top: 12px;
					}
					h1 {
						margin-top: 7px;
						color: rgb(9, 42, 68);
						font-size: 28px;
						letter-spacing: 1px;
						font-weight: bold;
						line-height: normal;
						font-family: Cabin, "PingFang SC", sans-serif;
						em {
							font-size: 22px;
							margin-left: 10px;
							font-weight: bold;
							font-family: Cabin, "PingFang SC", sans-serif;
						}
					}
					a {
						display: block;
						cursor: pointer;
						width: 210px;
						height: 40px;
						margin: 13px auto;
						line-height: 40px;
						font-size: 16px;
						color: rgb(0, 128, 255);
						letter-spacing: 1px;
						text-align: center;
						// margin-top: 13px;
						border-width: 1px;
						border-style: solid;
						border-color: rgb(0, 128, 255);
						border-image: initial;
						border-radius: 4px;
					}
				}
				&:hover {
					transform: scale(1.1);
					box-shadow: rgb(225, 234, 240) 0px 20px 21px 0px;
					transition: all 200ms ease 0s;
					border-top: 4px solid rgb(46, 177, 252);
				}
			}
		}
		.market {
			background-color: rgb(239, 244, 251);
			// position: relative;
			.el-table__header {
				th {
					font-size: 15px;
					padding: 30px 0;
					text-align: center;
					color: #000;
					font-family: Cabin, sans-serif;
				}
			}
			.el-table__body {
				td {
					text-align: center;
					padding: 30px 0;
					// font-weight: 550;
					font-size: 15px;
					color: rgb(57, 59, 89);
					letter-spacing: 1px;
    				font-family: Cabin, sans-serif;
				}
			}
			.view-more {
				width: 1200px;
				margin: 0 auto;
				padding: 50px 0;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				a {
					font-size: 16px;
					color: rgb(9, 42, 68);
					letter-spacing: 1px;
					display: block;
					margin-left: auto;
					width: fit-content;
					border-width: 1px;
					border-style: solid;
					border-color: rgba(30, 35, 41, 0.3);
					border-image: initial;
					border-radius: 4px;
					padding: 10px 40px 10px 62px;
				}
			}
		}
		.why-choose {
			width: 1200px;
			
		}
		.reason-list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			li {
				width: 260px;
				padding: 30px 1px 27px;
				background: #fff;
				border: 1px solid rgba(30,35,41,0.1);
			}
		}
		.trade-plaform {
			background-image: url('../assets/imgs/trade-now-bg.png');
			background-size: 1166px 234px;
			background-repeat: no-repeat;
			background-position: 60% 90px;
			width: 100%;
			height: 468px;
			// position: absolute;
			// pointer-events: none;
			h1 {
				font-family: Cabin,PingFang SC,sans-serif;
				font-size: 40px;
				font-weight: 700;
				line-height: normal;
				-webkit-letter-spacing: normal;
				-moz-letter-spacing: normal;
				-ms-letter-spacing: normal;
				letter-spacing: normal;
				text-align: center;
				color: #393b59;
			}
			p {
				font-family: PingFangSC,sans-serif;
				font-size: 18px;
				font-weight: normal;
				line-height: normal;
				-webkit-letter-spacing: normal;
				-moz-letter-spacing: normal;
				-ms-letter-spacing: normal;
				letter-spacing: normal;
				text-align: center;
				color: #78889e;
				margin-top: 22px;
			}
			a {
				border-radius: 4px;
				box-shadow: 0 10px 10px 0 rgba(86,172,254,0.27);
				background-image: linear-gradient(to right,#0080fe,#45beff);
				font-size: 18px;
				font-weight: 500;
				line-height: normal;
				-webkit-letter-spacing: 1px;
				-moz-letter-spacing: 1px;
				-ms-letter-spacing: 1px;
				letter-spacing: 1px;
				text-align: center;
				color: #ffffff;
				font-family: Cabin,PingFangSC,sans-serif;
				padding: 15px 39px;
				margin: 68px auto 0;
				display: block;
				width: -webkit-fit-content;
				width: -moz-fit-content;
				width: fit-content;
				width: -moz-fit-content;
				min-width: 230px;
			}
		}
		
	}
	.index-notic {
		padding: 10px;
		text-align: center;
		font-size: 13px;
		background: #f1f1f1;
		.text-color {
			display: inline-block;
			margin:  0 15px;
			
		}
	}
	.why-choose {
		margin: 0 auto;
		padding: 50px 0;
		h1 {
			font-family: Cabin,PingFang SC,sans-serif;
			font-size: 40px;
			font-weight: 700;
			line-height: normal;
			-webkit-letter-spacing: normal;
			-moz-letter-spacing: normal;
			-ms-letter-spacing: normal;
			letter-spacing: normal;
			text-align: center;
			color: #393b59;
			margin-bottom: 50px;
		}
		.reason-list {
			
			li {
				
				
				
				h2 {
					font-family: Cabin,PingFang SC,sans-serif;
					font-weight: bold;
					line-height: normal;
					-webkit-letter-spacing: normal;
					-moz-letter-spacing: normal;
					-ms-letter-spacing: normal;
					letter-spacing: normal;
					text-align: center;
					color: #393b59;
					font-size: 18px;
					margin-top: 20px;
					
				}
				p {
					font-family: PingFangSC,sans-serif;
					font-weight: normal;
					line-height: normal;
					-webkit-letter-spacing: normal;
					-moz-letter-spacing: normal;
					-ms-letter-spacing: normal;
					letter-spacing: normal;
					text-align: center;
					color: #78889e;
					font-size: 14px;
					margin-top: 26px;
					margin-bottom: 26px;
					padding: 0 30px;
				}
				a {
					color: #0080ff;
					font-size: 14px;
					text-align: center;
					border: solid 0.5px rgba(9,42,68,0.1);
					border-radius: 4px;
					font-family: PingFang SC,sans-serif;
					display: block;
					width: -webkit-fit-content;
					width: -moz-fit-content;
					width: fit-content;
					width: -moz-fit-content;
					padding: 10px 24px;
					margin: 0 auto;
					&:hover {
						color: #ffffff;
						background-image: linear-gradient(to left,#45beff,#0080ff);
						border: none;
					}
				}
			}
		}
		
	}
</style>